const Child = () => {
  const handler1 = (flag, ev) => {
    console.log("--4", flag);
    console.log("--4", ev);
  };
  const handler2 = () => {
    console.log("--5");
  };
  return (
    <div>
      <h1>函数组件</h1>
      <button onClick={(ev) => handler1(4, ev)}>点击4</button>
      <button onClick={handler2}>点击5</button>
    </div>
  );
};

export default class extends React.Component {
  constructor(props) {
    super(props); //修改事件处理器的this指向
  }

  handler1(flag, ev) {
    console.log("--1", flag);
    console.log("--1", this);
    console.log("--1", ev);
  }
  handler2(ev, flag) {
    console.log("--2", flag);
    console.log("--2", this);
    console.log("--2", ev);
  }

  handler3(ev) {
    console.log("--list", ev.target.dataset);
  }

  render() {
    return (
      <div>
        <h1>学习事件绑定</h1>
        <button onClick={this.handler1.bind(this, 1)}>点击1</button>
        <br />
        <button onClick={this.handler1.bind(this, 2)}>点击2</button>
        <hr />
        <button onClick={(ev) => this.handler2(ev, 3)}>点击3</button>
        <Child></Child>
        <hr />
        <div onClick={(ev) => this.handler3(ev)}>
          <div data-row="1">第1行</div>
          <div data-row="2">第2行</div>
          <div data-row="3">第3行</div>
        </div>
      </div>
    );
  }
}
